<template>
 <div class="box">
    
      <div class="meddle">
        
        <ul>
            <li v-for="item in list" :key="item.id">
                <div>
                    <img :src="item.image" alt="" style="width: 100%;" @click="$router.push('/detail/'+(item.id))">
                    <p>{{ item.title }}</p>
                    <p style="color: red;">￥{{ item.price }}</p>
                </div>
            </li>
        </ul>
      </div>
    </div>

</template>

<script setup>
    import request from '@/utils/request.js'
    import { ref,onMounted } from "vue";
    const list=ref([])
    onMounted(()=>{
        request.get('/list',{
            params:{
                pagination:1, pageNum:30
            }
        }).then(res=>{
            if(res.data.code==200){
                list.value=res.data.data
            }
        })
    })
</script>
<style lang="scss" scoped>
    ul{
        column-count: 2;
    }

</style>